<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>Drawing</title>
  <link rel="stylesheet" href="light.css" />
</head>

<body>
  <noscript>
    <strong>niivue requires JavaScript.</strong>
  </noscript>
  <header>
    <button id="save">Save as HTML</button>
    <label for="drawPen">Draw color:</label>
    <select name="drawPen" id="drawPen">
      <option value="-1">Off</option>
      <option value="0">Erase</option>
      <option value="1">Red</option>
      <option value="2">Green</option>
      <option value="3">Blue</option>
      <option value="8">Filled Erase</option>
      <option value="9">Filled Red</option>
      <option value="10">Filled Green</option>
      <option value="11">Filled Blue</option>
      <option value="12">Erase Selected Cluster</option>
    </select>
    <button id="left">left</button>
    <button id="right">right</button>
    <button id="posterior">posterior</button>
    <button id="anterior">anterior</button>
    <button id="inferior">inferior</button>
    <button id="superior">superior</button>
    <button id="info">info</button>
    <button id="undo">undo</button>
    <button id="growcut">grow cut</button>
    <label for="drawOpacity">drawing opacity</label>
    <input type="range" min="0" max="100" value="80" class="slider" id="drawOpacity" />
    <label for="check1">fill pen overwrites</label>
    <input type="checkbox" id="check1" name="check1" checked />
    <label for="check2">Radiological</label>
    <input type="checkbox" id="check2" name="check2" unchecked />
    <label for="check3">World space</label>
    <input type="checkbox" id="check3" name="check3" unchecked />
    <label for="check9">Linear Interpolation</label>
    <input type="checkbox" id="check9" name="check9" checked />
    <label for="check10">HighDPI</label>
    <input type="checkbox" id="check10" name="check10" checked />
  </header>
  <main id="container">
    <canvas id="gl1"></canvas>
  </main>
  <footer>&nbsp;
    <label id="location"></label>
    <p>
      <textarea id="scriptText" name="customText" rows="8"
        cols="60">let cmap = {&#10; R: [0, 255, 22, 127],&#10; G: [0, 20, 192, 187],&#10; B: [0, 152, 80, 255],&#10; labels: ["clear", "pink","lime","sky"],&#10;};</textarea>
      &nbsp;<button id="custom">Apply</button>&nbsp;
  </footer>
</body>

</html>
<script type="module" async>
  import * as niivue from "../dist/index.js";
  import { esm } from "../dist/index.min.js";
  
  document
    .getElementById("drawOpacity")
    .addEventListener("change", doDrawOpacity);
  function doDrawOpacity() {
    nv1.setDrawOpacity(this.value * 0.01);
  }
  document.getElementById("drawPen").addEventListener("change", doDrawPen);
  function doDrawPen() {
    const mode = parseInt(document.getElementById("drawPen").value);
    nv1.setDrawingEnabled(mode >= 0);
    if (mode >= 0) nv1.setPenValue(mode & 7, mode > 7);
    if (mode === 12)
      //erase selected cluster
      nv1.setPenValue(-0);
  }
  document.getElementById("left").addEventListener("click", doLeft);
  function doLeft() {
    nv1.moveCrosshairInVox(-1, 0, 0);
  }
  document.getElementById("right").addEventListener("click", doRight);
  function doRight() {
    nv1.moveCrosshairInVox(1, 0, 0);
  }
  document.getElementById("posterior").addEventListener("click", doPosterior);
  function doPosterior() {
    nv1.moveCrosshairInVox(0, -1, 0);
  }
  document.getElementById("anterior").addEventListener("click", doAnterior);
  function doAnterior() {
    nv1.moveCrosshairInVox(0, 1, 0);
  }
  document.getElementById("inferior").addEventListener("click", doInferior);
  function doInferior() {
    nv1.moveCrosshairInVox(0, 0, -1);
  }
  document.getElementById("info").addEventListener("click", doInfo);
  function doInfo() {
    let obj = nv1.getDescriptives(0, [], true);
    let str = JSON.stringify(obj, null, 2)
    alert(str);
  }
  document.getElementById("superior").addEventListener("click", doSuperior);
  function doSuperior() {
    nv1.moveCrosshairInVox(0, 0, 1);
  }
  document.getElementById("undo").addEventListener("click", doUndo);
  function doUndo() {
    nv1.drawUndo();
  }
  document.getElementById("growcut").addEventListener("click", doGrowCut);
  function doGrowCut() {
    nv1.drawGrowCut();
  }
  document.getElementById("check1").addEventListener("change", doCheckClick);
  function doCheckClick() {
    nv1.drawFillOverwrites = this.checked;
  }
  document.getElementById("check2").addEventListener("change", doCheck2Click);
  function doCheck2Click() {
    nv1.setRadiologicalConvention(this.checked);
  }
  document.getElementById("check3").addEventListener("change", doCheck3Click);
  function doCheck3Click() {
    nv1.setSliceMM(this.checked);
  }
  document.getElementById("check9").addEventListener("change", doCheck9Click);
  function doCheck9Click() {
    nv1.setInterpolation(!this.checked);
  }
  document.getElementById("check10").addEventListener("change", doCheck10Click);
  function doCheck10Click() {
    nv1.setHighResolutionCapable(this.checked);
  }
  var btn = document.getElementById("custom");
  btn.onclick = function (event) {
    var val = document.getElementById("scriptText").value;
    val += ';nv1.setDrawColormap(cmap);';
    val && eval(val);
  }
  function handleLocationChange(data) {
    document.getElementById("location").innerHTML =
      "&nbsp;&nbsp;" + data.string;
  }
  async function saveAsHtml() {
    const javascript = await nv1.generateLoadDocumentJavaScript("gl1", decodeURIComponent(esm));
    const html = `<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Drawing</title>
    <style>
      html {
  height: auto;
  min-height: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100%;
  width: 100%;
  position: absolute;
  font-family: system-ui, Arial, Helvetica, sans-serif;
  user-select: none; /* Standard syntax */
  color: white;
  background: #202020;
}
header {
  margin: 10px;
}
main {
  flex: 1;
  background: #000000;
  position: relative;
}
footer {
  margin: 10px;
}
canvas {
  position: absolute;
  cursor: crosshair;
}
canvas:focus {
  outline: 0px;
}
div {
  display: table-row;
  background-color: blue;
}
.dropdown {
  float: left;
  overflow: hidden;
}
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 12px 12px;
  background-color: #202020;
  font-family: inherit;
  margin: 0;
}
.dropdown:hover .dropbtn {
  background-color: #9a9;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #303030;
  min-width: 160px;
  border-radius: 5px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.dropdown-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  line-height: 6px;
}
.dropdown-content a:hover {
  background-color: #aba;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown-item-checked::before {
  position: absolute;
  left: 0.2rem;  
  font-weight: 600;
}
.divider {
  border-top: 1px solid grey;
}
.vertical-divider {
  border-left: 1px solid grey;
  height: 40px;
}
.help-text {
  margin: auto;
  max-width: 150px;
  padding: 0 10px;
}
.slidecontainer {
  padding: 10px 10px;
  white-space: normal;
  word-break: break-word;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
</style>
  </head>
  <body>
    <noscript>
      <strong>niivue requires JavaScript.</strong>
    </noscript>
    <header>
      <button id="save">Save as HTML</button>
      <label for="drawPen">Draw color:</label>
      <select name="drawPen" id="drawPen">
        <option value="-1">Off</option>
        <option value="0">Erase</option>
        <option value="1">Red</option>
        <option value="2">Green</option>
        <option value="3">Blue</option>
        <option value="8">Filled Erase</option>
        <option value="9">Filled Red</option>
        <option value="10">Filled Green</option>
        <option value="11">Filled Blue</option>
        <option value="12">Erase Selected Cluster</option>
      </select>
      <button id="left">left</button>
      <button id="right">right</button>
      <button id="posterior">posterior</button>
      <button id="anterior">anterior</button>
      <button id="inferior">inferior</button>
      <button id="superior">superior</button>
      <button id="info">info</button>      
      <button id="undo">undo</button>
      <button id="growcut">grow cut</button>
      <label for="drawOpacity">drawing opacity</label>
      <input
        type="range"
        min="0"
        max="100"
        value="80"
        class="slider"
        id="drawOpacity"
      />
      <label for="check1">fill pen overwrites</label>
      <input type="checkbox" id="check1" name="check1" checked />
      <label for="check2">Radiological</label>
      <input type="checkbox" id="check2" name="check2" unchecked />
      <label for="check3">World space</label>
      <input type="checkbox" id="check3" name="check3" unchecked />
      <label for="check9">Linear Interpolation</label>
      <input type="checkbox" id="check9" name="check9" checked />
      <label for="check10">HighDPI</label>
      <input type="checkbox" id="check10" name="check10" checked />
    </header>
    <main id="container">
      <canvas id="gl1"></canvas>
    </main>
    <footer>&nbsp;
      <label id="location"></label>
      <p>
      <textarea id="scriptText" name="customText" rows="8" cols="60">let cmap = {&#10; R: [0, 255, 22, 127],&#10; G: [0, 20, 192, 187],&#10; B: [0, 152, 80, 255],&#10; labels: ["clear", "pink","lime","sky"],&#10;};</textarea>
      &nbsp;<button id="custom">Apply</button>&nbsp;
    </footer>
  </body>
</html>
<script type="module" async>
  ${javascript}
  document
    .getElementById("drawOpacity")
    .addEventListener("change", doDrawOpacity);
  function doDrawOpacity() {
    nv1.setDrawOpacity(this.value * 0.01);
  }
  document.getElementById("drawPen").addEventListener("change", doDrawPen);
  function saveAsHtml() {
    saveNiivueAsHtml("niivue.drawing.html");
  }
  function doDrawPen() {
    const mode = parseInt(document.getElementById("drawPen").value);
    nv1.setDrawingEnabled(mode >= 0);
    if (mode >= 0) nv1.setPenValue(mode & 7, mode > 7);
    if (mode === 12)
      //erase selected cluster
      nv1.setPenValue(-0);
  }
  document.getElementById("left").addEventListener("click", doLeft);
  function doLeft() {
    nv1.moveCrosshairInVox(-1, 0, 0);
  }
  document.getElementById("right").addEventListener("click", doRight);
  function doRight() {
    nv1.moveCrosshairInVox(1, 0, 0);
  }
  document.getElementById("posterior").addEventListener("click", doPosterior);
  function doPosterior() {
    nv1.moveCrosshairInVox(0, -1, 0);
  }
  document.getElementById("anterior").addEventListener("click", doAnterior);
  function doAnterior() {
    nv1.moveCrosshairInVox(0, 1, 0);
  }
  document.getElementById("inferior").addEventListener("click", doInferior);
  function doInferior() {
    nv1.moveCrosshairInVox(0, 0, -1);
  }
  document.getElementById("info").addEventListener("click", doInfo);
  function doInfo() {
    let obj = nv1.getDescriptives(0, [], true);
    let str = JSON.stringify(obj, null, 2)
    alert(str);
  }
  document.getElementById("superior").addEventListener("click", doSuperior);
  function doSuperior() {
    nv1.moveCrosshairInVox(0, 0, 1);
  }
  document.getElementById("undo").addEventListener("click", doUndo);
  function doUndo() {
    nv1.drawUndo();
  }
  document.getElementById("growcut").addEventListener("click", doGrowCut);
  function doGrowCut() {
    nv1.drawGrowCut();
  }
  
  document.getElementById("check1").addEventListener("change", doCheckClick);
  function doCheckClick() {
    nv1.drawFillOverwrites = this.checked;
  }
  document.getElementById("check2").addEventListener("change", doCheck2Click);
  function doCheck2Click() {
    nv1.setRadiologicalConvention(this.checked);
  }
  document.getElementById("check3").addEventListener("change", doCheck3Click);
  function doCheck3Click() {
    nv1.setSliceMM(this.checked);
  }
  document.getElementById("check9").addEventListener("change", doCheck9Click);
  function doCheck9Click() {
    nv1.setInterpolation(!this.checked);
  }
  document.getElementById("check10").addEventListener("change", doCheck10Click);
  function doCheck10Click() {
    nv1.setHighResolutionCapable(this.checked);
  }
  var btn = document.getElementById("custom");
  btn.onclick = function (event) {
    var val = document.getElementById("scriptText").value;
    val += ';nv1.setDrawColormap(cmap);';
    val && eval(val);
  }
  function handleLocationChange(data) {
    document.getElementById("location").innerHTML =
      "&nbsp;&nbsp;" + data.string;
  }
  var button = document.getElementById("save");
    button.onclick = saveAsHtml;
  nv1.setRadiologicalConvention(false);
  nv1.setSliceType(nv1.sliceTypeMultiplanar);
<\/script>`;
    niivue.NVUtilities.download(html, "niivue.drawing.html", "application/html");
  }

  var button = document.getElementById("save");
  button.onclick = saveAsHtml;
  var volumeList1 = [{ url: "../images/FLAIR.nii.gz" }];
  var nv1 = new niivue.Niivue({
    backColor: [1, 1, 1, 1],
    onLocationChange: handleLocationChange,
  });
  nv1.setRadiologicalConvention(false);
  nv1.opts.multiplanarShowRender = niivue.SHOW_RENDER.ALWAYS;
  await nv1.attachTo("gl1");
  await nv1.loadVolumes(volumeList1);
  nv1.setSliceType(nv1.sliceTypeMultiplanar);
  await nv1.loadDrawingFromUrl("../images/lesion.nii.gz");
</script>